<!--
 * @Author: ITDLCL
 * @Date: 2024-11-12 15:56:32
 * @LastEditors: ITDLCL
 * @Description:
-->
<!--Pay methos-->
<template>
  <view class="pay border-bottom d-flex" :class="[customStyle]">
    <view class="pay-item">
      <label for="title" class="siyuan-medium">选择支付方式</label>
    </view>
    <view class="pay-item">
      <view class="pay-item-cate d-flex border-bottom" @click="checkPay(2)">
        <image
          v-if="payInfo.type == 2"
          src="https://bac-miniprogram.oss-cn-beijing.aliyuncs.com/images/icon/arrow_right_bottom_black.png"
          mode="widthFix"
        ></image>
        <text class="siyuan-medium">积分抵扣</text>
        <text class="siyuan-medium">{{ props.payInfo.noClick ? payInfo.count : props.payInfo.checkPoint ? '积分不足': '超过抵扣限额' }}</text>
      </view>
      <view class="pay-item-cate d-flex" @click="checkPay(1)">
        <image
          v-if="payInfo.type != 2"
          src="https://bac-miniprogram.oss-cn-beijing.aliyuncs.com/images/icon/arrow_right_bottom_black.png"
          mode="widthFix"
        ></image>
        <text class="siyuan-medium">微信支付</text>
        <text class="intel-one-mono-medium">
          <text class="siyuan-medium">￥</text>
          {{ payInfo.cash ? payInfo.cash.toFixed(2) : 0.00}}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
let props = defineProps({
  payInfo: {
    type: Object,
    default: {},
  },
  customStyle: {
    type: String,
    default: "",
  },
});

let emits = defineEmits(["changeType"]);

function checkPay(index) {
	console.log(props.pageName)
  if (props.payInfo.noClick) {
    emits("changeType", index);
  }
}
</script>

<style lang="scss" scoped>
.pay {
  background-color: #ffffff;
  .pay-item {
    flex: 1;
    font-size: 24rpx;
    label[for="title"] {
      padding-left: 28rpx;
      display: inherit;
      font-size: inherit;
	  line-height: 66rpx;
    }
    .pay-item-cate {
      position: relative;
      height: 66rpx;
	  padding-right: 34rpx;
      align-items: center;
      text {
        flex: 1;
        text-align: center;
      }
      text + text {
        text-align: right;
      }
      image {
        position: absolute;
        left: 0;
        top: 22rpx;
        width: 26rpx;
        height: 26rpx;
      }
    }
  }
}
.park-confirm {
	.pay-item {
		label[for="title"] {
			line-height: 100rpx;
		}
		.pay-item-cate {
			image {
				top: 38rpx;
			}
		}
	}
}
</style>
